<template>
	<!-- 用户信息页面容器 -->
	<view class="user-info-page-container">
		<!-- 标题栏 - 移动到swiper上方 -->
		<view class="tab-title-container">
			<scroll-view scroll-x="true" class="tab-title-scroll">
				<view class="tab-title-list">
					<view
						v-for="(tab, index) in tabData"
						:key="index"
						class="tab-title-item"
						:class="{ 'active': activeTabIndex === index }"
						@tap="handleIndicatorClick(index)"
					>
						<text class="tab-title-text">{{ tab }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 整个页面使用一个Swiper实现左右滑动 -->
		<swiper class="page-swiper-container" :current="activeTabIndex" @change="handlePageChange" :circular="false" :disable-scroll="false">
			<swiper-item v-for="(tab, idx) in tabData" :key="idx" class="page-swiper-item">
				<view class="page-swiper-content">
					<!-- 用户列表 -->
					<scroll-view scroll-y="true" class="user-list-container">
						<view v-for="(user, userIdx) in getUserDataByTab(idx)" :key="user.id" class="user-item-container">
							<view class="user-info-container">
								<!-- 头像 -->
								<image :src="user.avatar" alt="用户头像" class="user-avatar"></image>
								<view class="user-details-container">
									<!-- 名称 -->
									<view class="user-name-text">{{ user.name }}</view>
									<!-- 概述 -->
									<view class="user-description-text">{{ user.description }}</view>
								</view>
							</view>
							<!-- 关注按钮 -->
							<button @click="handleFollowToggle(user)"
								:class="user.isFollowed ? 'followed-button' : 'follow-button'" size="mini">{{ user.isFollowed ? '已关注' : '关注' }}</button>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 底部指示器 -->
		<view class="tab-indicator-container">
			<view v-for="(tab, index) in tabData" :key="index" class="indicator-dot" :class="{ 'active': activeTabIndex === index }" @tap="handleIndicatorClick(index)"></view>
		</view>
	</view>
</template>

<script setup lang="ts">	import { ref } from 'vue';

	/**
	 * Tab标签数据 - 包含4个标签
	 */
	const tabData = ['看过的人', '推荐', '关注', '粉丝'];

	/**
	 * 当前激活的Tab索引
	 */
	const activeTabIndex = ref(0);

	/**
	 * 模拟用户数据
	 */
	const mockUserData = {
		0: [ // 看过的人
			{
				id: 1,
				avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
				name: '张三',
				description: '前端开发工程师',
				isFollowed: false
			},
			{
				id: 2,
				avatar: 'https://randomuser.me/api/portraits/women/2.jpg',
				name: '李四',
				description: 'UI设计师',
				isFollowed: true
			},
		],
		1: [ // 推荐
			{
				id: 3,
				avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
				name: '王五',
				description: '后端开发工程师',
				isFollowed: false
			},
			{
				id: 4,
				avatar: 'https://randomuser.me/api/portraits/women/4.jpg',
				name: '赵六',
				description: '产品经理',
				isFollowed: false
			},
		],
		2: [ // 关注
			{
				id: 5,
				avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
				name: '钱七',
				description: '测试工程师',
				isFollowed: true
			},
			{
				id: 6,
				avatar: 'https://randomuser.me/api/portraits/women/6.jpg',
				name: '孙八',
				description: '运维工程师',
				isFollowed: true
			},
		],
		3: [ // 粉丝
			{
				id: 7,
				avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
				name: '周九',
				description: '学生',
				isFollowed: false
			},
			{
				id: 8,
				avatar: 'https://randomuser.me/api/portraits/women/8.jpg',
				name: '吴十',
				description: '自由职业者',
				isFollowed: false
			},
		]
	};

	/**
	 * 根据Tab索引获取用户数据
	 * @param tabIndex - Tab索引
	 * @returns 用户数据数组
	 */
	const getUserDataByTab = (tabIndex: number) => {
		return mockUserData[tabIndex] || [];
	};

	/**
	 * 处理指示器点击
	 * @param index - 目标Tab索引
	 */
	const handleIndicatorClick = (index: number) => {
		activeTabIndex.value = index;
	};

	/**
	 * 处理页面Swiper切换
	 * @param e - 页面切换事件对象
	 */
	const handlePageChange = (e: any) => {
		activeTabIndex.value = e.detail.current;
	};

	/**
	 * 切换关注状态
	 * @param user - 用户对象
	 */
	const handleFollowToggle = (user: any) => {
		user.isFollowed = !user.isFollowed;
	};
</script>

<style scoped lang="scss">	/* 用户信息页面容器 */
	/* 定义全局变量 */
	$primary-color: #3b82f6;
	$bg-color: white;
	$border-color: #e5e7eb;
	$text-color-primary: #374151;
	$text-color-secondary: #6b7280;
	$button-radius: 4px;
	$avatar-radius: 50%;
	$indicator-radius: 4px;
	$indicator-dot-radius: 50%;
	$transition-duration: 0.3s;

	.user-info-page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	/* Tab标题容器 - 放置在Swiper上方 */
	.tab-title-container {
		padding: 0;
		background-color: $bg-color;
		border-bottom: 1px solid $border-color;
	}

	/* 顶部横向 Tab 列表 */
	.tab-title-scroll { width: 100%; }
	.tab-title-list {
		display: flex;
		gap: 16px;
		padding: 12px 16px;
	}
	.tab-title-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 10px;
		border-radius: 12px;
		color: $text-color-primary;
		transition: all $transition-duration ease;
	}
	.tab-title-item.active {
		background-color: rgba(59, 130, 246, 0.1);
		color: $primary-color;
	}
	.tab-title-text { font-size: 14px; font-weight: 600; }

	/* 整个页面Swiper */
	.page-swiper-container {
		flex: 1;
		width: 100%;
	}

	/* Swiper Item样式 */
	.page-swiper-item {
		height: 100%;
	}

	/* Swiper Item内容 */
	.page-swiper-content {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* 用户列表容器 */
	.user-list-container {
		flex: 1;
	}

	/* 用户项样式 */
	.user-item-container {
		padding: 16px;
		border-bottom: 1px solid $border-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $bg-color;
	}

	/* 用户信息 */
	.user-info-container {
		display: flex;
		align-items: center;
	}

	/* 用户头像 */
	.user-avatar {
		width: 48px;
		height: 48px;
		border-radius: $avatar-radius;
		margin-right: 16px;
	}

	/* 用户详情 */
	.user-details-container {
		flex: 1;
	}

	/* 用户名 */
	.user-name-text {
		font-size: 18px;
		font-weight: 600;
	}

	/* 用户描述 */
	.user-description-text {
		font-size: 14px;
		color: $text-color-secondary;
	}

	/* 关注按钮 */
	.follow-button {
		padding: 4px 12px;
		border-radius: $button-radius;
		background-color: $primary-color;
		color: white;
		border: none;
		cursor: pointer;
		width: 80px;
		display: flex;
		justify-content: center;
	}

	/* 已关注按钮 */
	.followed-button {
		padding: 4px 12px;
		border-radius: $button-radius;
		background-color: $border-color;
		color: $text-color-primary;
		border: none;
		cursor: pointer;
		width: 80px;
		display: flex;
		justify-content: center;
	}

	/* 底部指示器 */
	.tab-indicator-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 12px 0;
		background-color: $bg-color;
		gap: 12px; /* 增加间距使指示器更清晰 */
		border-top: 1px solid $border-color;
		z-index: 10; /* 确保在最上层 */
	}

	/* 指示器点样式 - 增大尺寸提高可见性 */
	.indicator-dot {
		width: 10px;
		height: 10px;
		border-radius: $indicator-dot-radius;
		background-color: #9ca3af; /* 更深的颜色提高对比度 */
		transition: all $transition-duration ease;
	}

	/* 激活状态指示器点样式 */
	.indicator-dot.active {
		width: 28px;
		border-radius: $indicator-radius;
		background-color: $primary-color;
	}
</style>